<template>
  <div class="commodity">
    <div class="head clear">
      <div v-if="!Ftype" class="btnTop clear">
        <GRButton class="goodsTopL" :btnText="btnText" @reshow="dataShow" />
        <div class="goodsTopR">
          <Search @data="upState" :easysearchState="false" />
        </div>
      </div>
      <SearchItem class="searchItem" v-show="state" @highSearch="SearchBtn">
      </SearchItem>
    </div>
    <div class="commodityContent" style="overflow: initial;">
      <TableList :tableData="tableData" :titleList="titleList" :linklist="linklist" :isCheck="isCheck"
        :selWidth="selWidth" :btnState="btnState" :limit="limit" :url="url" @getCheck="getCheck" @reshow="dataShow" />
    </div>
    <delAll class="footer" :checkVal="checkVal" />
    <Paging class="footer" :total="total" @getPage="getPage" @getLimit="getLimit" />
  </div>
</template>

<script>
  import GRButton from '../../../components/GoodsComponent/GoodsRouterButton.vue';
  import Search from "../../../components/Search.vue";
  import SearchItem from "../../../components/GoodsComponent/GoodsSearchItem.vue"
  import TableList from "../../../components/List.vue";
  import delAll from '../../../components/GoodsComponent/GoodsDel.vue';
  import Paging from '../../../components/Paging.vue';
  import { commodityList, commoditySearch } from '../../../http/apis/goodsApi/commodity.js'
  import { mapState, mapMutations, mapActions } from 'vuex'

  export default {
    components: {
      Search,
      SearchItem,
      GRButton,
      TableList,
      delAll,
      Paging
    },
    data() {
      return {
        checkVal: [],
        // 表格数据
        tableData: [],
        // 默认每页总数
        limit: 3,
        // 当前页数
        page: 1,
      }
    },
    computed: {
      ...mapState('goodsStore', ['Ftype', 'btnText', 'url', 'type', 'linklist', 'titleList', 'selWidth', 'state', 'isCheck', 'total', 'btnState']),
    },
    methods: {
      ...mapMutations('goodsStore', ['Goodslist', 'upState']),
      ...mapActions('goodsStore', ['GetCounts']),
      // 获取选择对象
      getCheck(val) {
        this.checkVal = val;
      },
      // 翻页
      getPage(val) {
        this.page = val;
        this.dataShow();
      },
      // 修改每页显示长度
      getLimit(val) {
        this.limit = val;
        this.dataShow();
      },
      // 渲染数据转格式
      showDataType(datas) {
        let listArr = datas.filter((item) => {
          item.goods_cost = item.goods_cost / 1000;
          item.goods_price = item.goods_price / 1000;
          if (item.goodstype.gt_pno == '无') {
            item.gt_pno = item.goodstype.gt_name;
            item.gt_name = '--';
          } else {
            item.gt_pno = item.goodstype.gt_pno;
            item.gt_name = item.goodstype.gt_name;
          }
          return item;
        });
        return listArr;
      },
      // 页面渲染
      dataShow() {
        this.GetCounts({ database: this.type })
        commodityList({
          currentPage: this.page,
          pageSize: this.limit,
        })
          .then((res) => {
            console.log('成功请求:', res);
            if (res.data.code == '200') {
              this.tableData = this.showDataType(res.data.data)
            }
          })
          .catch((err) => {
            console.log('请求失败', err)
          });
      },
      // 高级搜索
      SearchBtn(arr) {
        if (arr.gt_name == '') {
          arr.gt_name = arr.gt_pno
          arr.gt_pno = ''
        } 
        let data = {
          currentPage: this.page,//当前页码数
          pageSize: this.limit,//每页显示条数
          goods_name: arr.goods_name,//商品名称
          goods_descript: arr.goods_descript,//商品规格
          goods_barcode: arr.goods_barcode,//商品型号
          gt_pno: arr.gt_pno,//商品大类
          gt_name: arr.gt_name//商品小类
        }
        console.log(data)
        commoditySearch(data)
          .then((res) => {
            console.log("搜索成功请求:", res.data.data);
            if (res.data.code == "200") {
              if (res.data.data.length == 0) {
                this.$message({
                  type: "warning",
                  message: "未查询到指定内容",
                  showClose: true,
                });
                this.tableData = []
              } else {
                this.$message({
                  type: "success",
                  message: "查询成功",
                  showClose: true,
                });
              }
            }
          })
          .catch((err) => {
            console.log("搜索请求失败", err);
            this.$message({
              type: "error",
              message: "请求失败，请稍后再试",
              showClose: true,
            });
          });
      }
    },
    created() {
      this.Goodslist();
      this.GetCounts({ database: this.type })
      this.dataShow()
    },
  }
</script>

<style>
</style>